<template>
    <div>
        <div class="box">
            <div></div>
            <div class="naver-box">
                <div class="time">
                    {{ formattedNow }}
                </div>
                <div class="naver-user">
                    <div class="user-test">已登录 </div>
                </div>
                <el-button size="small" @click="logout" class="naver-bottun" type="primary">退出</el-button>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            formattedNow: ''//时间
        }
    },
    methods: {
        logout() {
            // 退出按钮
            localStorage.removeItem('token')
            this.$router.push("/")
        },
        search(e) {
            if (e.key == 'Enter') {
                if (this.searchtext) {
                    console.log(this.searchtext);
                } else {
                    this.$message({
                        message: '内容不能为空',
                        type: 'warning',
                    })
                }

            }
        },
        time() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const date = now.getDate().toString().padStart(2, '0');
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');

            this.formattedNow = `${year}年${month}月${date}日 ${hours}:${minutes}`;
        }
    },
    created() {
        this.time()
        setInterval(() => {
            this.time()
        }, 1000);

    },
}
</script>
<style scoped lang="less">
.box {
    display: flex;
    justify-content: space-between;
}

button {
    background-color: #08cfde;
    border: none;
    width: 70px;
    height: 30px;
    margin-top: 5px;
    border-radius: 0;
}

.naver-box {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 0;
    height: 100%;
    padding-top: 5px;

    .naver-user {
        margin-right: 50px;

        .user-test {
            text-align: center;
            height: 100%;
            line-height: 2.5;
        }
    }

    .time {
        width: 170px;
        line-height: 2.5;
        margin-right: 150px;
    }

    .naver-bottun {
        margin-right: 5px;
    }
}
</style>